<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Web截屏控件2演示界面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="zyCapture/skygqbox.css" />
    <script type="text/javascript" src="zyCapture/jquery-1.4.min.js"></script>
    <script type="text/javascript" src="zyCapture/json2.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="zyCapture/skygqbox.js"></script>
    <script type="text/javascript" src="kindeditor-min.js" charset="utf-8"></script>
    <script type="text/javascript" src="zyCapture/scp.js" charset="utf-8"></script>
    <script type="text/javascript" src="vue.min.js" charset="utf-8"></script>
</head>
<body>
    <p>泽优全平台截屏解决方案(zyCapture)</p>	
	<div id="kind">
        <kindeditor ref="kind"></kindeditor>
    </div>
    <script>
        Vue.component('kindeditor', {
            data() {
                return {
                    editor_id: null, scp: null
                }
            },
            props: {
                value: '',
                config: {}
            },
            mounted() {
            	//根路径：http://localhost/api/scp/
		        var pos = window.location.href.lastIndexOf("/");
		        var api = [
		            window.location.href.substr(0, pos + 1),
		            "upload.jsp"
		        ].join("");
            	
            	var ref = this;
                this.scp = zyCapture.getInstance({
                    config: {
		                PostUrl: api,
		                Fields: { uname: "test" }
		            },
                    event: {
                        hotKey: function () {
                            setTimeout(function () {
                                ref.scp.Capture2();
                            }, 100);
                        },
                        postComplete: function (url) {
                            var img = '<img src="' + url + "?t=" + new Date().getTime() + '"/>';
                            KE.appendHtml(ref.editor_id, img);
                        }
                    }                    
                });
                
                KE.show({
                    id: 'editor'
                    , items: ['source', '|', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy', 'paste',
                        'plainpaste', 'wordpaste', 'zycapture', '|', 'justifyleft', 'justifycenter', 'justifyright',
                        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                        'superscript', '|', 'selectall', '-',
                        'title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold',
                        'italic', 'underline', 'strikethrough', 'removeformat', '|', 'image',
                        'flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink', '|', 'about']
                    , afterCreate: function (id) {
                        //初始化
                        ref.editor_id = id;
                    }
                });
            },
            methods: {},
            destroyed() { },
            template: '<div><textarea id="editor" name="editor" style="width:100%;height:400px;"/></div>'
        });

        var kind = new Vue({
            el: '#kind',
            data: {
            }
            , mounted: function () {
                //注册事件
                window.scpMgr = this.$refs.kind.scp;
            }
        });
    </script>
</body>
</html>